import styled, { ThemeProvider } from "styled-components";
// Define our button
import React, { useCallback, useState } from "react";
// MyComponent.js
const MyComponent = styled.div`background-color: green;`;

// For some reason this component still has a green background,
// even though you're trying to override it with the "red-bg" class!
const Test =()=><MyComponent className="red-bg" >1111</MyComponent>
export default Test

// 这个例子中的样式组件的样式是用了一个类名选择器设置的，用单个类名选择器添加的css样式被样式组件的样式覆盖掉了，选择器是一样的，权重都一样，但是样式组件生成的样式代码是被放到了页面的head标签的最后，引入css文件放在head标签的靠前，后面的会把前面的样式覆盖